<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-05-09 16:19:08
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-05-24 15:58:47
 * @FilePath: \ant-design-vue-jeecg-master\src\views\grid\modules\value.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div>
      <span :key="index" v-for="(i, index) in length">
        <a-input
          :maxLength="2"
          style="width: 50px; margin-right: 10px"
          v-model="model.Values[index]"
          @change="handleInput"
        ></a-input>
      </span>
    </div>
    <div style="color: red" v-if="falseFlag">请输入两位16进制数</div>
  </div>
</template>

<script>
export default {
  props: ['length'],
  data() {
    return {
      length,
      falseFlag: false,
      model: {
        Values: [],
      },
    }
  },
  methods: {
    handleInput(e, callback) {
      this.falseFlag = false
      let val = e.target.value
      let reg = /^[A-Fa-f0-9]{2}$/
      if (!reg.test(val)) {
        this.falseFlag = true
        return false
      }
    },
  },
}
</script>

<style></style>
